<template>
  <div style="padding-bottom: 20px;">
    <header-component></header-component>
    <!--公告-->
    <div v-for="(item, index) in noticeData" v-bind:key="index" class="rab_gonggao  rab_bg">
      <div class="rab_gonggao_title">
        {{item | filterNoticeTitle(lang)}}
      </div>
      <p class="rab_gonggao_title2" v-html="filterCont(item)"></p>
      <p class="rab_gonggao_last">{{item.published_time | timestampToDate('MM-dd hh:mm')}}</p>
    </div>
    <div v-show="noticeData.length == 0 && !isLoading" style="color: #fff;text-align: center;line-height: 60px;font-size: 14px;">
      {{$t('carGame.no_record')}}
    </div>
    <div v-show="isLoading" style="color: #fff;text-align: center;line-height: 60px;font-size: 14px;">
      loading……
    </div>
    <footer-component></footer-component>
  </div>
</template>

<script>
import headerComponent from '@/view/common/header'
import footerComponent from '@/view/common/footer'

export default {
  name: 'name',
  data () {
    return {
      noticeData: [],
      isLoading: true
    }
  },
  computed: {
    lang: function () {
      return this.$store.getters.getLang
    }
  },
  components: {
    headerComponent,
    footerComponent
  },
  created () {
    this.getNoticeData()
  },
  methods: {
    getNoticeData () {
      // console.log('start get notice data !')
      this.$http.post(this.$config.noticeUrl, {page: 1, page_size: 20}, {emulateJSON: true}).then(res => {
        // console.log('notice data : ', res.data)
        this.noticeData = res.data
        this.isLoading = false
      }).catch(e => {
        console.log('service time err: ', e)
      })
    },
    filterCont (data) {
      if (!data || !data.post_content) {
        return ''
      }
      var text = ''
      if (this.lang === 'en') {
        text = data.post_excerpt || ''
      } else if (this.lang === 'zh') {
        text = data.post_content || ''
      } else {
        text = this.$utils.simple2TW(data.post_content + '')
      }
      return this.$utils.htmlDecode(text)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
